<template>
  <view class="container">
    <view class="pdf-box">
      <view v-if="haveRiderActivity" class="activity-wrapper">
        <text>骑王活动正在进行中</text>
        <view class="to-activity-wrapper">
          <u-button type="default" size="mini" @click="toRiderActivity">点击查看</u-button>
        </view>
      </view>
      <show-pdf class="iframe" ref="pdf" v-for="i in numPages" :key="i" :src="url" :page="i"></show-pdf>
    </view>
  </view>
</template>

<script>
import ShowPdf from "vue-pdf";
import {mapGetters} from "vuex"
import AuthInfo from "@/utils/authInfo.js";
import reportApi from '@/api/modules/report'

export default {
  data() {
    return {
      isShowLoading: true,
      url: "",
      numPages: null, // pdf 总页数
    };
  },
  components: {
    ShowPdf,
  },
  computed: {
    ...mapGetters(["isSign", "stepType", "encouragePdf", "haveRiderActivity"]),
  },
  mounted() {
    console.log('是否存在骑手活动', this.haveRiderActivity)
    this.getPdf();
  },
  methods: {
    async getPdf() {
      this.url = this.encouragePdf;
      this.getNumPages(this.encouragePdf);

    },
    //计算pdf页码总数
    getNumPages(url) {
      try {
        let loadingTask = ShowPdf.createLoadingTask(url);
        loadingTask.promise
            .then((pdf) => {
              this.numPages = pdf.numPages;
              setTimeout(() => {
                this.isShowLoading = false;
              }, 1500);
            })
      } catch (e) {
        // uni.showToast({
        //   title: `协议加载失败 ${url} ${e}`,
        //   icon: "error"
        // });
        // this.logger(url, e, data)
      }
    },
    // 跳转到骑手活动
    async toRiderActivity() {
      this.$u.route("pages/activity/index");
    },
    async logger(url, e, data) {
      let text = "协议埋点 ";
      text += 'Url: ' + url + ' \n ';
      text += 'Data: ' + JSON.stringify(data) + ' \n ';
      text += "Error: " + e + " \n ";
      try {
        await reportApi.errorReport({error: text, appId: '', openId: '',});
      } catch (e) {

      } finally {

      }
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
}

uni-page-body {
  height: 100%;
}

.u-tips {
  height: auto;
}

.pdf-box {
  position: absolute !important;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
}

.tips {
  position: absolute;
  bottom: 50px;
  margin: 15px auto;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  font-size: 12px;
  color: #666;
  width: 100%;
  text-align: center;
}

.custom-btn {
  position: absolute;
  bottom: 10px;
  margin: 15px auto;
  left: 50%;
  transform: translateX(-50%);
}

.loading-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;

  .text {
    margin-top: 10px;
  }
}

.fixed {
  position: fixed;
  width: 100%;
  height: 90px;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #e1e1e1;
}

.pt40 {
  padding-top: 50px;
}

.h80 {
  height: 73vh !important;
}

.activity-wrapper {
  position: absolute;
  width: 100%;
  height: 30px;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding-left: 16px;
  padding-right: 16px;
  background-color: #2979FF;
  color: white;
  z-index: 9999;
}

</style>
